<div ng-controller="AdminRecruitCtrl as vm">
<section class="content-header">
    <!-- Content Header (Page header) -->
    Recruitment Report
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> HR - Recruitment</a></li>
    </ol>
</section>
<!-- Main content -->
<section class="content">
    <div class="pull-right">
                        <form class="form-inline">
                          <div class="form-group">
                            <select class="form-control" ng-options="div for div in years track by div" ng-model="vm.year" ng-change="vm.loadData()">
                      </select>
                          </div>
                          <div class="form-group">
                            <select class="form-control" ng-options="div for div in months track by div" ng-model="vm.month" ng-change="vm.loadData()">
                      </select>
                          </div>
                          <div class="form-group">
                                    <select class="form-control" ng-options="div.name for div in regions track by div.id" ng-model="vm.region" ng-change="vm.regionChange()">
                                        <option ng-if="role!='Sub-Region Admin'" value="">--- Sub-Region ---</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <select class="form-control" ng-options="div.name for div in clusters track by div.id" ng-model="vm.cluster" ng-change="vm.loadData()">
                                        <option value="">--- Cluster ---</option>
                                    </select>
                                </div>
                        </form>
                       
                      
                    </div>
    <div class="row">
        <div class="col-md-12" >
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Source of Applicants</h3>
                </div>
                <div class="box-body margin" style="height:530px">
                    <!--                     <line-chart config="config" data="data"></line-chart>
 -->
                    <pie-chart config="config" data="data1"></pie-chart>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Source of New Comers</h3>
                </div>
                <div class="box-body margin" style="height:530px">
                    <pie-chart config="config" data="data2"></pie-chart>
                    
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Source of New Comers Convention Rate</h3>
                </div>
                <div class="box-body margin" style="height:530px">
                   <pie-chart config="config" data="data3"></pie-chart>
                    
                </div>
            </div>
        </div>
    </div>
</section>
</div>